import React, { useEffect } from 'react';
import { Radio, Modal } from 'antd';

const RadioGroup = Radio.Group;
const defaultRadio = [
  { name: '是', value: true },
  { name: '否', value: false },
];

export default function CustomeRadio({
  items = defaultRadio,
  value,
  initValue = items[1]?.value,
  onHandleChange,
  onChange,
  disabled,
  operatorNotChange = false, // 手动控制不调用onChange
  ...props
}) {
  const [modal, contextHolder] = Modal.useModal();
  useEffect(() => {
    if (!operatorNotChange) {
      onChange(value || initValue);
    }
  }, []);
  const handleChange = (e) => {
    // 自定义表单控件change事件
    if (props?.confirmConfig) {
      const { title, content, subContent } = props.confirmConfig;
      modal.confirm({
        title: `${title || ''}`,
        content: `${content || ''}`,
        subContent: <span>{subContent || ''}</span>,
        onOk() {
          onChange(e.target.value);
          onHandleChange?.(e);
        },
      });
    } else {
      onChange(e.target.value);
      // 页面自定义change事件
      onHandleChange?.(e);
    }
  };
  return (
    <>
      <RadioGroup value={value} onChange={(e) => handleChange(e)} {...props}>
        {items.map(({ value: key, name, disabled: itemDisableddisabled }) => (
          <Radio disabled={itemDisableddisabled || disabled} key={key} value={key}>
            {name}
          </Radio>
        ))}
      </RadioGroup>
      {contextHolder}
    </>
  );
}
